/*
*EditScheme.js
*配置方案构建->修改方案
*/
import React, {Component,PureComponent} from 'react';
import { Modal, Button,Form } from 'antd';
import { connect } from 'react-redux';
import {SchemeDetailTable,TargetSetTable} from './SchemeTable';


const EditSchemeForm = Form.create()(
  (props) => {
  const {
    visible, 
    onCancel, 
    onCreate, 
    form,
    LargeAssetData,
    detailData
  } = props;
  console.log("EditScheme.js-",props);
  return (
      visible&&detailData?
        <Modal
          visible={visible}
          title=""
          okText="保存"
          onCancel={onCancel}
          onOk={onCreate}
        >
        <Form layout="vertical">
          <SchemeDetailTable
          	detailData={detailData}
          />
          <TargetSetTable
          	detailData={detailData}
            LargeAssetData={LargeAssetData}
          />
        </Form>
      </Modal>: null
    );
  }
)
const mapStateToProps = state => ({
  detailData:state.configSconst.detailData,
  strategyName:state.configSconst.strategyName,
  strategyDescription:state.configSconst.strategyDescription,
  assets:state.configSconst.assets,
});
const mapDispatchToProps = {
  updateScheme:query=>({
    type:'configSconst/updateScheme',
    payload: query || {},
  }),
  changeState:query=>({
    type:'configSconst/changeState',
    payload: query || {},
  }),
};
@connect( mapStateToProps,mapDispatchToProps)
class EditScheme extends PureComponent {
  state = {
    visible: false,
  };
  // componentDidUpdate() {
  //   const screenHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
  //   const ele = document.querySelector('.add-panel .ant-modal-body');
  //   if (ele) {
  //     ele.style.height = `${screenHeight * 0.2}px`;
  //   }
  // }
  showModal = () => {
    this.setState({ visible: true });
  }
  handleCancel = () => {
    const {changeState}=this.props
    this.setState({ visible: false });
    changeState({
      'detailData':[],
      'assets':[],
      'strategyDescription':'',
      'strategyName':''
    })
  }
  handleCreate = () => {
    const {changeState}=this.props
    const form = this.form;
    const {
      updateScheme,
      strategyName,
      strategyDescription,
      assets,
      detailData,
      strategyId
    } =this.props;
    console.log('updateScheme>edit',this.props)
    if(strategyName==''){
      var upstrategyName = detailData.strategyName;
    }else{
      var upstrategyName= strategyName;
    }
    if(strategyDescription==''){
      var upstrategyDescription = detailData.strategyDescription;
    }else{
      var upstrategyDescription= strategyDescription;
    }
    if(_.isEmpty(assets)){
      var upassets = detailData.assets;
      upassets.map((i)=>{
        delete i.aComponentId
        delete i.assetName
        delete i.productCode
        delete i.productName
        delete i.AssetIndex
        delete i.AssetName
      })
    }else{
      var upassets = this.props.assets;
      console.log('updateScheme>>',upassets)
      upassets.map((i)=>{
        i.assetCode = i.AssetName
        i.assetId = i.AssetIndex
      })
      upassets.map((i)=>{
        delete i.aComponentId
        delete i.assetName
        delete i.productCode
        delete i.productName
        delete i.AssetIndex
        delete i.AssetName
        delete i.key
      })
    }
    updateScheme({
      'strategyName':upstrategyName,
      'strategyDescription':upstrategyDescription,
      'assets':upassets
    })
    this.setState({ visible: false });
    changeState({
      'detailData':[],
      'assets':[],
      'strategyDescription':'',
      'strategyName':''
    })
  }
  saveFormRef = (form) => {
    this.form = form;
  }
  render() {
    const {
      title,
      LargeAssetData,
      detailData,
    } =this.props;
    console.log('EditScheme.js>>>',this.props)
    return(
      <div>
        <span onClick={this.showModal}>{title}</span>
        <EditSchemeForm
          ref={this.saveFormRef}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          onCreate={this.handleCreate}
          LargeAssetData={LargeAssetData}
          detailData={detailData}
        />
      </div>
    )
  }
}



export default Form.create({})(EditScheme);
